<script setup lang="ts">
import YkPagination from '@yk/components/pagination/YkPagination.vue'
import { Pages } from '@typings/pages'
import { Plus } from '@element-plus/icons-vue'
import YkTableColumn from '@yk/components/table-column/YkTableColumn.vue'
import { ElForm } from 'element-plus'
import { TabBarUtil } from '@/layout/components/tab-bar'
import { delVariableModelAPI, getVariableModelListByPageAPI } from '@/api/variable'
import { VbTemplate } from '@/api/entity/variable'
import { MountedCheck, toEditPageCheck } from '@/utils'

const router = useRouter()
defineOptions({ name: 'VariableTemplate' })

const mc = new MountedCheck()
onMounted(() => {
  searchHandle()
  mc.end()
})

onActivated(() => {
  if (mc.isMounted()) return
  getTableData()
})

// region TODO 查询
const searchParams = reactive({
  q: ''
})
function searchHandle () {
  pages.pageNum = 1
  getTableData()
}
// endregion

// region TODO 表格数据
const pages = reactive(new Pages())
const tableData = shallowRef<VbTemplate[]>([])
function getTableData () {
  const loading = ElLoading.service()
  getVariableModelListByPageAPI({
    param: searchParams,
    ...pages.getParams()
  }).then((res) => {
    res.result().then((rdata) => {
      tableData.value = rdata.records
      pages.total = rdata.total
    })
  }).finally(loading.close)
}
function delTableItem (id: string) {
  ElMessageBox.confirm('删除当前变量模板？', '删除提醒').then(() => {
    const loading = ElLoading.service()
    delVariableModelAPI({ templateIds: [id] }).then((res) => {
      res.result().then(() => {
        getTableData()
      })
    }).finally(loading.close)
  })
}
// endregion

// region TODO 添加设备 & 查看 & 编辑
// 前往添加设备
function toAddVariableTemplate () {
  router.push({ name: 'AddVariableTemplate' })
}
// 前往查看设备
function toCheckVariableTemplate (id: string) {
  const _route = TabBarUtil.value.getTagInfo('CheckVariableTemplate')
  if (_route && (_route.query.id as string) !== id) {
    TabBarUtil.value.close('CheckVariableTemplate')
  }
  router.push({ name: 'CheckVariableTemplate', query: { id } })
}

// 前往编辑设备
function toEditVariableTemplate (id: string) {
  toEditPageCheck({
    id,
    name: 'EditVariableTemplate',
    message: '已存在未编辑完成的表单',
    query: { id }
  })
}
// endregion

// region TODO 跳转
function toDeviceData (id: string) {
  router.push({ name: 'DeviceData', query: { id } })
}
// endregion
</script>

<template>
  <div class="layout_view d-flex" style="min-height: 100%">
    <div class="c_card-page w-100">
      <div class="c_card_header c_card-title bor-divider-b">变量模板</div>
      <!--搜索表单-->
      <el-form inline class="c_form-search pt-16" @submit.prevent="searchHandle">
        <el-form-item label="模板名称">
          <el-input v-model="searchParams.q" placeholder="请输入模板名称搜索" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" native-type="submit">查询</el-button>
        </el-form-item>
      </el-form>
      <!--功能栏-->
      <div class="d-flex-between">
        <div class="d-flex">
          <el-button type="primary" :icon="Plus as any" @click="toAddVariableTemplate()">添加模板</el-button>
          <!--<yk-upload-file class="ml-12" is-none>-->
          <!--  <el-button type="success">批量导入</el-button>-->
          <!--</yk-upload-file>-->
        </div>
        <!--<el-button class="c_btn&#45;&#45;export" :icon="Download as any" @click="exportTableData">导出</el-button>-->
      </div>
      <!--表格-->
      <el-table class="mt-16 c_table-page w-100" stripe :data="tableData">
        <el-table-column label="#" type="expand">
          <template #default="scope">
            <div v-if="scope.row.deviceDTOList?.length" class="table__device-list px-20 py-16 d-grid text-color-primary fs-14">
              <span v-for="(item, index) in scope.row.deviceDTOList" :key="item.id">设备{{ index + 1 }}：
                <el-link type="primary" @click="toDeviceData(item.id)">{{ item.deviceName }}</el-link>
              </span>
            </div>
            <div v-else class="text-center w-100 text-color-placeholder">暂无关联设备</div>
          </template>
        </el-table-column>
        <yk-table-column label="模板名称" prop="modelName" />
        <yk-table-column label="变量数" prop="variableCount" />
        <!--<yk-table-column label="关联设备" prop="" />-->
        <yk-table-column label="添加时间" prop="createdAt" sortable />
        <el-table-column label="操作" width="250px">
          <template #default="scope">
            <div class="c_table-operation">
              <el-link type="primary" size="small" @click="toEditVariableTemplate(scope.row.id)">变量配置</el-link>
              <el-link type="primary" size="small" @click="toCheckVariableTemplate(scope.row.id)">查看</el-link>
              <el-link type="danger" size="small" @click="delTableItem(scope.row.id)">删除</el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <el-affix target=".c_table-page" position="bottom" :offset="0">
        <yk-pagination class="c_table-pagination-page" :pages="pages" @handle="getTableData" />
      </el-affix>
    </div>
  </div>
</template>

<style scoped lang="scss">
// 表格 - 设备列表
.table__device-list {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 16px;
}
</style>
